<template>
	<view class="root">
		<view class="header top-0 width-100vw" />
		<view
			:class="[
				`nav-bar fixed width-100vw fd-row jc-center ai-center height-88`,
			]"
		>
			<navigator open-type="navigateBack" class="f1 pl-28">
				<icons
					class="text-left"
					color="#fff"
					type="arrowleft"
					size="24"
				/>
			</navigator>
			<text class="f4 text-center fs-32 fw-700 color-fff">下单支付</text>
			<view class="f1" />
		</view>
		<view class="main">
			<view class="section bgc-fff">
				<label class="pb-30 bb-eb fs-30 jc-sb">
					<text class="color-333 fw-700">订单详情</text>
					<text class="color-8f9aa8">{{ orderInfo.on }}</text>
				</label>
				<view class="mt-16 fs-26 fw-500">
					<label
						v-for="(item, index) in orderInfo.list"
						:key="index"
						class="ai-center mt-14 mb-14"
					>
						<text class="color-8f9aa8">{{ item.title }}:</text>
						<text class="color-333 ml-10">{{ item.content }}</text>
					</label>
				</view>
			</view>
			<view class="section bgc-fff mt-26">
				<text class="pb-30 bb-eb fs-30 color-333 fw-700">支付费用</text>
				<view class="mt-16 pb-16 bb-eb fw-500">
					<label
						v-for="(item, index) in orderInfo.fee"
						:key="index"
						class="ai-center mt-14 mb-14 jc-sb"
					>
						<text class="color-8f9aa8 fs-26"
							>{{ item.title }}:</text
						>
						<text class="color-333 ml-10 fs-28">{{
							item.price
						}}</text>
					</label>
				</view>
				<label class="ai-baseline pt-30 jc-end">
					<text class="fs-26 color-333 fs-26">实际支付:</text>
					<text class="fs-34 color-fc5260 fs-28 ml-12"
						>￥{{ orderInfo.price }}</text
					>
				</label>
			</view>
			<view class="section bgc-fff mt-26">
				<text class="pb-30 bb-eb fs-30 color-333 fw-700">支付方式</text>
				<view class="mt-16 pb-16 color-333 bb-eb">
					<label
						v-for="(item, index) in payment.list"
						:key="index"
						@click="choosePayment(index)"
						class="ai-center mt-14 mb-14 jc-sb"
					>
						<label class="ai-center">
							<image
								class="width-42 height-42 mr-10"
								:src="
									'/static/imgs/icon-' +
									item.provider +
									'.png'
								"
							/>
							<text class="fs-26 fw-500">{{ item.name }}</text>
						</label>
						<image
							v-if="payment.selectedIndex == index"
							class="width-36 height-36"
							src="/static/imgs/icon-selected.png"
						/>
					</label>
				</view>
			</view>

			<navigator
				hover-class="btn-hover"
				:url="`/pages/webview?url=${encodeURIComponent(
					SERVER_URL + '/how2use.html'
				)}`"
				class="fd-row ai-center mt-36 fs-32 color-4388e7"
			>
				<image
					class="width-60 height-60 mr-10"
					src="/static/imgs/icon-knowledge.png"
					mode="aspectFit"
				/>
				<text>如何免费使用驿到家>></text>
			</navigator>
		</view>
		<view
			hover-class="btn-hover"
			@click="pay"
			:class="[
				`f1 comfirm fixed height-100 bottom-0 fs-36 fw-500 width-100vw color-fff height-100percent ai-center jc-center`,
			]"
		>
			确认支付
		</view>
	</view>
</template>

<script>
	import icons from "@/components/icons";
	export default {
		components: {
			icons,
		},
		data: () => ({
			orderInfo: { list: [] },
			payment: {
				selectedIndex: 0,
				list: [
					{
						name: "支付宝支付",
						provider: "alipay",
					},
					{ name: "微信支付", provider: "wxpay" },
				],
			},
			SERVER_URL: uni.REQUEST_URL,
		}),
		onLoad() {
			const { oid, yuanjia, price, sn, code, discount, station, userinfo } =
				getApp().globalData.payInfo;

			this.orderInfo = {
				orderId: oid,
				on: sn,
				price,
				fee: [
					{ title: "配送价格", price: `¥ ${yuanjia}` },
					{ title: "当前优惠", price: `- ¥ ${discount || "0.00"}` },
				],
				list: [
					{ title: "驿站名称", content: station.name },
					{ title: "取件号码", content: code },
					{
						title: "配送地址",
						content: userinfo.address,
					},
					{
						title: "联系方式",
						content: userinfo.usermobile,
					},
				],
			};
		},
		methods: {
			choosePayment(index) {
				this.payment.selectedIndex = index;
			},
			pay() {
				// #ifdef MP-WEIXIN
				uni.showToast({ title: "请前往app端进行下单", icon: "none" });
				// #endif

				// #ifdef APP-PLUS
				const {
					payment: { list, selectedIndex },
					orderInfo: { orderId: oid },
				} = this;
				const { provider } = list[selectedIndex];

				uni.fetch("/api/order/get_pay", {
					data: { oid, provider },
					success: (orderInfo) =>
						uni.requestPayment({
							provider,
							orderInfo,
							fail: () =>
								uni.showToast({
									title: "支付失败",
									icon: "none",
								}),
							success: () =>
								uni.fetch("/api/order/select", {
									data: { oid, provider },
									success: () =>
										uni.showToast({
											title: "支付成功！",
											duration: 1200,
											mask: true,
											success: setTimeout(
												() =>
													uni.reLaunch({
														url: "/pages/order",
													}),
												1200
											),
										}),
								}),
						}),
				});
				// #endif
			},
		},
	};
</script>

<style>
	.header,
	.nav-bar {
		box-sizing: content-box;
		padding-top: var(--status-bar-height);
		background: linear-gradient(90deg, #8ec5fc, #4388e7);
	}
	.header {
		z-index: 0;
		height: 210rpx;
		border-bottom-right-radius: 20%;
		border-bottom-left-radius: 20%;
		background: linear-gradient(90deg, #8ec5fc, #4388e7);
	}

	.nav-bar {
		z-index: 9;
	}

	.main {
		z-index: 1;
		margin-top: -88rpx;
		margin-bottom: 130rpx;
		padding: 0 30rpx;
	}

	.section {
		box-shadow: 0 5rpx 20rpx 0 rgba(151, 166, 192, 0.22);
		border-radius: 10rpx;
		padding: 30rpx 25rpx;
	}

	.bb-eb {
		border-bottom: 1rpx solid #ebebeb;
	}

	.comfirm {
		z-index: 1;
		background: linear-gradient(90deg, #8ec5fc, #4388e7);
	}
</style>
